/** * Created by wust on 2020-04-02 10:43:54. */
<template>
  <div>
    <el-tabs v-model="editableTabsValue" @tab-remove="removeTab">
      <el-tab-pane :name="defaultActiveName" label="工单列表">
        <work-order-search-bar v-on:search="search"></work-order-search-bar>
        <el-button-group style="margin-bottom: 7px;float: left;">
          <el-button size="mini" type="primary" @click="create" v-has-permission="'WorkOrderList.create'" icon="el-icon-plus">新建</el-button>
          <el-button size="mini" type="primary" @click="update" v-has-permission="'WorkOrderList.update'" icon="el-icon-edit">修改</el-button>
          <el-button size="mini" type="primary" @click="deleteById" v-has-permission="'WorkOrderList.delete'" icon="el-icon-delete">删除</el-button>
          <el-button size="mini" type="primary" @click="distribute" v-has-permission="'WorkOrderList.distribute'" icon="el-icon-setting">派发</el-button>
          <el-button size="mini" type="primary" @click="confirm" v-has-permission="'WorkOrderList.confirm'" icon="el-icon-finished">确认</el-button>
        </el-button-group>
        <el-table border size="mini" :data="baseDto.lstDto" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column label="工单号" prop="workOrderNumber" width="180"></el-table-column>
          <el-table-column label="工单名称" prop="workOrderName" width="180"></el-table-column>
          <el-table-column label="工单类型" prop="workOrderTypeLabel" width="120"></el-table-column>
          <el-table-column label="申请人" prop="applicantLabel" width="120"></el-table-column>
          <el-table-column label="紧急程度" width="80">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.priorityLevel == 'C103701'" type="danger" size="mini" effect="dark">{{scope.row.priorityLevelLabel}}</el-tag>
              <el-tag v-if="scope.row.priorityLevel == 'C103703'" type="success" size="mini" effect="dark">{{scope.row.priorityLevelLabel}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="当前负责人" prop="directorLabel" width="120"></el-table-column>
          <el-table-column label="当前状态" width="80">
             <template slot-scope="scope">
                <el-link v-if="scope.row.state == 'C103501'" type="primary" @click="timelineDetail(scope.row)">{{scope.row.stateLabel}}</el-link>
                <el-link v-if="scope.row.state == 'C103503'" type="warning" @click="timelineDetail(scope.row)">{{scope.row.stateLabel}}</el-link>
                <el-link v-if="scope.row.state == 'C103505'" type="danger" @click="timelineDetail(scope.row)">{{scope.row.stateLabel}}</el-link>
                <el-link v-if="scope.row.state == 'C103507'" type="success" @click="timelineDetail(scope.row)">{{scope.row.stateLabel}}</el-link>
             </template>
          </el-table-column>
          <el-table-column prop="createrName" label="创建人" width="120"></el-table-column>
          <el-table-column label="创建时间" width="180">
            <template slot-scope="scope">
              <i class="el-icon-time"></i>
              <span style="margin-left: 10px">{{ scope.row.createTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</span>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="pageSizeChange"
          @current-change="pageIndexChange"
          :current-page="searchModel.pageDto.pageNum"
          :page-sizes="searchModel.pageDto.pageSizes"
          :page-size="searchModel.pageDto.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="baseDto.page.total"
        ></el-pagination>
      </el-tab-pane>
      <el-tab-pane v-for="item in editableTabs" :key="item.key" :label="item.label" :name="item.name" closable>
        <work-order-create v-if="item.key == 'create'"></work-order-create>
        <work-order-update v-if="item.key == 'update'" v-bind:selectedModel="selectedModel"></work-order-update>
      </el-tab-pane>
    </el-tabs>

    <el-dialog title="工单状态跟踪" :visible.sync="detailDialogVisible" width="40%">
      <work-order-timeline v-if="detailDialogVisible" v-bind:selectedModel="selectedModel"></work-order-timeline>
    </el-dialog>

    <el-dialog title="派发工单" :visible.sync="distributeDialogVisible" :before-close="handleClose" width="40%">
      <work-order-distribute v-if="distributeDialogVisible" v-bind:selectedModel="selectedModel" v-on:closeDialog="closeDialog"></work-order-distribute>
    </el-dialog>
  </div>
</template>
<script>
import Vue from 'vue';
import WorkOrderCreate from './work-order-create'
import WorkOrderUpdate from './work-order-update'
import WorkOrderSearchBar from './work-order-search-bar'
import WorkOrderTimeline from './work-order-timeline'
import WorkOrderDistribute from './work-order-distribute'

export default {
  name: 'work-order-list',
  components: {
    WorkOrderSearchBar,
    WorkOrderUpdate,
    WorkOrderCreate,
    WorkOrderTimeline,
    WorkOrderDistribute
  },
  data() {
    return {
      searchModel: {
        pageDto: { pageSize: 10, pageNum: 1, pageSizes: [10, 20, 30, 100] },
        name: null
      },
      baseDto: { page: { total: 0 } },
      selectedModel: {},
      defaultActiveName: 'WorkOrderList',
      editableTabsValue: 'WorkOrderList',
      editableTabs: [],
      tabIndex: 2,
      checkedDataList: [],
      detailDialogVisible: false,
      distributeDialogVisible: false
    };
  },
  created: function() {
    this.listPage();
  },
  methods: {
    handleSelectionChange: function(val) {
      this.checkedDataList = val;
    },
    listPage: function() {
      Vue.$ajax({
        method: 'post',
        url: Vue.$workOrderServerURL + '/web/WorkOrderController/listPage',
        data: this.searchModel
      }).then(res => {
        if (res.data.flag === 'SUCCESS') {
          this.baseDto = res.data;
        } else {
          if (!Vue.$isNullOrIsBlankOrIsUndefined(res.data.message)) {
            this.$message({
              message: res.data.message,
              type: 'warning'
            });
          }
        }
      });
    },
    pageSizeChange: function(e) {
      this.searchModel.pageDto.pageSize = e;
      this.listPage();
    },
    pageIndexChange: function(e) {
      this.searchModel.pageDto.pageNum = e;
      this.listPage();
    },
    search: function(p) {
      if (!p.isCollapse) {
        // 非高级查询，则只需要根据关键字查询
        this.searchModel.name = p.searchKey;
      } else {
        this.searchModel = p.searchModel;
      }
      this.searchModel.pageDto.pageNum = 1;
      this.listPage();
    },
    create: function() {
      this.addTab('新建工单', 'CreateWorkOrder', 'create');
    },
    update: function() {
      if (this.checkedDataList == null || this.checkedDataList.length !== 1) {
        this.$message({
          message: '请选择一条数据',
          type: 'warning'
        });
        return;
      }

      let data = this.checkedDataList[0]
      if (data.state !== 'C103501') {
        this.$message({
          message: '当前状态下不允许修改工单',
          type: 'warning'
        });
        return;
      }

      this.selectedModel = data
      this.addTab('编辑-' + data.workOrderName, data.id + '', 'update')
    },
    deleteById: function() {
      if (this.checkedDataList == null || this.checkedDataList.length !== 1) {
        this.$message({
          message: '请选择一条数据',
          type: 'warning'
        });
        return;
      }

      let data = this.checkedDataList[0];
      if (data.state !== 'C103501') {
        this.$message({
          message: '当前状态下不允许删除工单',
          type: 'warning'
        });
        return;
      }

      this.$confirm('您确定删除该记录吗？', '询问', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
          Vue.$ajax({
            method: 'delete',
            url: Vue.$workOrderServerURL + '/web/WorkOrderController/' + data.id
          }).then(res => {
            if (res.data.flag !== 'SUCCESS') {
              this.$message({
                message: res.data.message,
                type: 'warning'
              });
            } else {
              this.$message({
                message: res.data.message,
                type: 'success'
              });
              this.listPage();
            }
          });
        })
        .catch(() => {});
    },
    distribute: function () { // 分配工单
      if (this.checkedDataList == null || this.checkedDataList.length !== 1) {
        this.$message({
          message: '请选择一条数据',
          type: 'warning'
        });
        return
      }

      let data = this.checkedDataList[0];
      if (data.state !== 'C103501') {
        this.$message({
          message: '该订单当前状态不属于可分配状态',
          type: 'warning'
        });
        return
      }

      if (!Vue.$isNullOrIsBlankOrIsUndefined(data.director) && data.director != 0) {
        this.$message({
          message: '该订单已经被分配',
          type: 'warning'
        })
        return
      }

      this.selectedModel = data
      this.distributeDialogVisible = true
    },
    confirm: function () {
      if (this.checkedDataList == null || this.checkedDataList.length !== 1) {
        this.$message({
          message: '请选择一条数据',
          type: 'warning'
        });
        return
      }

      let data = this.checkedDataList[0]
      if (data.state === 'C103507') {
        this.$message({
          message: '该工单已经确认过，不需要重复确认',
          type: 'warning'
        });
        return
      }

      if (data.state !== 'C103505') {
        this.$confirm('该工单还没有完成，要继续确认吗？', '询问', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            Vue.$ajax({
              method: 'post',
              url: Vue.$workOrderServerURL + '/web/WorkOrderController/confirm?workOrderId=' + data.id + '&description=确认工单'
            }).then(res => {
              if (res.data.flag !== 'SUCCESS') {
                this.$message({
                  message: res.data.message,
                  type: 'warning'
                });
              } else {
                this.$message({
                  message: res.data.message,
                  type: 'success'
                });
                this.listPage();
              }
            });
        }).catch(() => {})
      }
    },
    closeDialog: function () {
      this.distributeDialogVisible = false
    },
    handleClose(done) {
      done()
    },
    timelineDetail: function (data) {
      this.selectedModel = data
      this.detailDialogVisible = true
    },
    addTab: function(label, name, key) {
      let ele = { label: label, name: name, key: key };
      let flag = false;

      for (let i = 0; i < this.editableTabs.length; i++) {
        let var1 = this.editableTabs[i];
        if (var1.name === name) {
          flag = true;
          break;
        }
      }

      if (!flag) {
        this.editableTabs.push(ele);
      }
      this.editableTabsValue = name;
    },
    removeTab: function(targetName) {
      let tabs = this.editableTabs;
      let activeName = this.editableTabsValue;
      if (activeName === targetName) {
        tabs.forEach((tab, index) => {
          if (tab.name === targetName) {
            let nextTab = tabs[index + 1] || tabs[index - 1];
            if (nextTab) {
              activeName = nextTab.name;
            } else {
              activeName = this.defaultActiveName;
              this.listPage();
            }
          }
        });
      }

      this.editableTabsValue = activeName;
      this.editableTabs = tabs.filter(tab => tab.name !== targetName);
    },
    clickTab: function(tab) {
      if (tab.name === this.defaultActiveName) {
        this.listPage();
      }
    }
  }
};
</script>
